<template>
  <a-modal
    :title="modelTitle"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :afterClose="modelClosed"
    :maskClosable="false"
    :width="500"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model ref="formRef" :model="form" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="权限名称" prop="name">
        <a-input v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item label="上级菜单" prop="parentId">
        <a-tree-select
          v-model="form.parentId"
          treeNodeFilterProp="title"
          show-search
          style="width: 100%"
          :tree-data="treeData"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="请选择"
          tree-default-expand-all
          :replaceFields="{ children: 'children', title: 'name', key: 'menuId', value: 'menuId' }"
        >
        </a-tree-select>
      </a-form-model-item>
      <a-form-model-item label="权限ID" prop="roleId">
        <a-input v-model="form.roleId" />
      </a-form-model-item>
      <a-form-model-item label="权限排序" prop="sortNum">
        <a-input-number :style="{ width: '100%' }" v-model="form.sortNum" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
// import { addIndex, updateIndex } from '@/api/targetTerm'
import { getMenuList } from '@/api/system'

export default {
  props: {
    visible: {
      type: Boolean,
      required: false
    },
    modelTitle: {
      type: String,
      default: 'Model'
    }
  },
  model: {
    prop: 'visible',
    event: 'hidenModel'
  },
  data() {
    return {
      form: {},
      treeData: [],
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      confirmLoading: false,
      formRules: {
        name: [
          {
            required: true,
            message: '请输入指标名称',
            trigger: ['blur', 'change']
          }
        ],
        parentId: [{ required: false, message: '请选择上级菜单', trigger: ['blur', 'change'] }],
        roleId: [
          {
            required: true,
            message: '请输入权限ID',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  mounted() {
    this.getTreeList()
  },
  methods: {
    getTreeList() {
      getMenuList().then(res => {
        this.treeData = res.data
      })
    },
    initForm(_params) {
      this.form = JSON.parse(JSON.stringify(_params))
      this.$emit('hidenModel', true)
    },
    modelClosed() {
      this.restForm()
    },
    handleOk() {
      this.$refs['formRef'].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          if (this.form.id) {
            this.upDataHandler(this.form)
          } else {
            this.addHandler(this.form)
          }
        }
      })
    },
    addHandler(_params) {
      // addIndex(_params)
      //   .then(() => {
      //     this.handleCancel()
      //     this.$message.success('添加成功')
      //     this.$emit('confirmHandle', true)
      //   })
      //   .catch(() => {
      //     this.confirmLoading = false
      //   })
    },
    upDataHandler(_params) {
      // updateIndex(_params)
      //   .then(res => {
      //     console.log(res, 'update')
      //     this.handleCancel()
      //     this.$message.success('更新成功')
      //     this.$emit('confirmHandle', false)
      //   })
      //   .catch(() => {
      //     this.confirmLoading = false
      //   })
    },
    handleCancel() {
      this.$emit('hidenModel', false)
    },
    restForm() {
      this.form = {}
      this.$refs['formRef'].resetFields()
      this.confirmLoading = false
    }
  }
}
</script>
